import {ScrollView, View, Text, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';
import sys from '@/assets/image/message/sys.png';
import shop from '@/assets/image/message/shop.png';
import property from '@/assets/image/message/property.png';
import gove from '@/assets/image/message/gove.png';
import community from '@/assets/image/message/community.png';
import sc from '@/assets/image/message/sc.png';
import youImg from '@/assets/image/my/you.png';
import msClose from '@/assets/image/message/ms_close.png';
import hornIcon from '@/assets/image/message/horn.png';
import className from 'classnames';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      message: [],
      show: false,
    };
  }

  componentDidMount() {}

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  messageList() {
    let {
      main: {message},
      actions: {action},
    } = this.props;
    let arr = [
      {type: 1, unReadNum: ''},
      {type: 2, unReadNum: ''},
      {type: 3, unReadNum: ''},
      // {type: 4, unReadNum: ''},
      {type: 5, unReadNum: ''},
    ];
    arr.forEach((data) => {
      if (message.every((item) => item.type != data.type)) {
        message.push(data);
      }
    });
    const msgList = [];
    if (message.length && message.length > 0) {
      message.map((item) => {
        if (item.type == 1) {
          item.title = '系统信息';
        } else if (item.type == 2) {
          item.title = '商城信息';
        } else if (item.type == 3) {
          item.title = '物业信息';
        } else if (item.type == 4) {
          item.title = '政务信息';
        } else {
          item.title = '社区信息';
        }
        msgList.push(
          <View
            className="mesList"
            onClick={() =>
              Taro.navigateTo({
                url:
                  item.type == 2
                    ? '/pages/package-A/customer/message-push/center/index'
                    : `/pages/package-A/message/list/index?type=${item.type}&title=${item.title}`,
              })
            }
          >
            <View className="item">
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  position: 'relative',
                }}
              >
                <Image
                  className="icon"
                  mode="widthFix"
                  src={
                    item.type == 2
                      ? shop
                      : item.type == 1
                      ? sys
                      : item.type == 3
                      ? property
                      : item.type == 4
                      ? gove
                      : item.type == 5
                      ? community
                      : sc
                  }
                />
                {item.unReadNum <= 99 && item.unReadNum > 0 ? (
                  <View className="num">
                    {item.unReadNum > 0 && item.unReadNum <= 9 ? (
                      <Text className="nums_text">{item.unReadNum}</Text>
                    ) : (
                      <Text className="num_text">{item.unReadNum}</Text>
                    )}
                  </View>
                ) : item.unReadNum > 99 ? (
                  <View className="num">
                    <Text className="nums_text">99+</Text>
                  </View>
                ) : null}
                <View>
                  {item.type == 1 ? (
                    <Text className="title">系统消息</Text>
                  ) : item.type == 3 ? (
                    <Text className="title">物业消息</Text>
                  ) : item.type == 4 ? (
                    <Text className="title">政务消息</Text>
                  ) : item.type == 5 ? (
                    <Text className="title">社区消息</Text>
                  ) : (
                    <Text className="title">商城消息</Text>
                  )}
                </View>
              </View>
              <Image className="right" src={youImg} mode="widthFix" />
            </View>
          </View>,
        );
      });
    } else {
      msgList.push(
        <Blank
          content="暂无消息通知！"
          img={notdataImg}
          imgStyle={{width: '400rpx', height: '400rpx'}}
          textStyle={{
            fontSize: '32rpx',
            color: '#999999',
            textAlign: 'center',
            marginTop: '40rpx',
          }}
        />,
      );
    }
    return msgList;
  }

  render() {
    let {show} = this.state;
    return (
      <ScrollView className="packageAMessage" scrollY>
        {show && (
          <View className="topFirst">
            <View style={{flexDirection: 'row'}}>
              <View className="center">
                <Image className="hornIcon" src={hornIcon} mode="widthFix" />
              </View>
              <Text className="title">开启消息通知，重要消息不再错过</Text>
            </View>
            <View style={{flexDirection: 'row'}}>
              <View
                className="center"
                // onClick={() => {
                // }}
              >
                <Text className="open">去开启</Text>
              </View>
              <View
                className="center"
                onClick={() => {
                  this.setState({show: false});
                }}
              >
                <Image className="msClose" src={msClose} mode="widthFix" />
              </View>
            </View>
          </View>
        )}
        {this.messageList()}
      </ScrollView>
    );
  }
}
